<script setup lang="ts">
import type { GuessItem } from "@/types/home";
import Good from "@/components/good.vue";

const props=defineProps<{
    guessList:GuessItem[],
    title:string
}>()

</script>

<template>
    <view class="caption">
        <text class="text">{{ title }}</text>
    </view>
    <view class="guess">
      <good v-for="(item) in guessList" :key="item.id" :good="item"></good>
    </view>
</template>

<style lang="scss">

.caption {
    display: flex;
    justify-content: center;
    line-height: 1;
    padding: 36rpx 0 40rpx;
    font-size: 32rpx;
    color: #262626;

    .text {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 28rpx 0 30rpx;

        &::before,
        &::after {
            content: '';
            width: 20rpx;
            height: 20rpx;
            background-image: url(@/static/images/bubble.png);
            background-size: contain;
            margin: 0 10rpx;
        }
    }
}

.guess {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 20rpx;
}

</style>
